<template>
  <div>
    <h1>【aty-notice】 component demo</h1>
    <p>【aty-notice】 本质  "无实例",掉全局方法</p>
    <aty-panel>在界面右上角显示可关闭的全局通知，常用于以下场景：
      <br />
      >通知内容带有描述信息.  <br />
      >系统主动推送.</aty-panel>
    <aty-row class="fd-notice-box">
      <aty-row>
        <aty-title level="4">1.【aty-notice】 基础</aty-title>
        <aty-panel>基本用法，默认在 4.5秒后关闭。如果 desc 参数为空或不填，则自动应用仅标题模式下的样式。
          建议标题言简意赅，例如"删除成功"，更详细的内容可以放在描述信息里。</aty-panel>
        <aty-button type="primary" @click="open(true)" />
        <aty-button type="default" @click="open(false)" />
      </aty-row>
      <aty-row>
        <aty-title level="4">2.【aty-notice】 提示类型 </aty-title>
        <aty-button @click="info(false)">Info</aty-button>
        <aty-button @click="success(false)">Success</aty-button>
        <aty-button @click="warning(false)">Warning</aty-button>
        <aty-button @click="error(false)">Error</aty-button>
        <p>Only title</p>
        <aty-button @click="info(true)">Info</aty-button>
        <aty-button @click="success(true)">Success</aty-button>
        <aty-button @click="warning(true)">Warning</aty-button>
        <aty-button @click="error(true)">Error</aty-button>
      </aty-row>
      <aty-row>
        <aty-title level="4">3.【aty-notice】 自定义时长  </aty-title>
        <aty-button @click="time">Open notice</aty-button>
      </aty-row>
      <aty-row>
        <aty-title level="4">6.【aty-notice】 自定义 Render 函数  </aty-title>
        <aty-button @click="renderFunc">show notice</aty-button>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {
  //  components: { Alert, Icon }
  methods: {
    open (nodesc) {
      Artery.notice.open({
        title: 'Notification title',
        desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
      })
    },
    info (nodesc) {
      Artery.notice.info({
        title: 'Notification title',
        desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
      })
    },
    success (nodesc) {
      Artery.notice.success({
        title: 'Notification title',
        desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
      })
    },
    warning (nodesc) {
      Artery.notice.warning({
        title: 'Notification title',
        desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
      })
    },
    error (nodesc) {
      Artery.notice.error({
        title: 'Notification title',
        desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
      })
    },
    time () {
      Artery.notice.open({
        title: 'Notification title',
        desc: 'This notification does not automatically close, and you need to click the close button to close.',
        duration: 0
      })
    },
    renderFunc () {
      Artery.notice.open({
        title: 'Notification title',
        // desc: 'The desc will hide when you set render.',
        render: h => {
          return h('span', [
            'This is created by ',
            h('a', 'render'),
            ' function'
          ])
        }
      })
    }
  }
}
</script>
<style  lang="less" type="text/less"  scoped>
    .fd-notice-box {
        margin: 20px;
        text-align: left;
    }
</style>
